window.addEventListener('load', function () {
    var subnav = document.querySelector('.subnav');
    var home = document.querySelector('.home');
    var goback = document.querySelector('#goback')
    var sport = document.querySelector('.sport')
    var sportTop = sport.offsetTop;
    var homeTop = home.offsetTop;
    var subnavTop = subnav.offsetTop - home.offsetTop;
    document.addEventListener('scroll', function () {
        if (window.pageYOffset >= homeTop) {
            subnav.style.position = 'fixed';
            subnav.style.top = subnavTop + 'px';
        }
        else {
            subnav.style.position = 'absolute';
            subnav.style.top = '1694px'
        }
        if (window.pageYOffset >= sportTop) {
            goback.style.display = 'block';
        }
        else {
            goback.style.display = 'none';
        }

    })
    //    鼠标经过出现左右箭头图标
    var focus = document.querySelector('.focus');


    focus.addEventListener('mouseenter', function () {
        focus.children[0].style.display = 'block';
        focus.children[1].style.display = 'block';
        clearInterval(timer);
        timer = null;
    });

    focus.addEventListener('mouseleave', function () {
        focus.children[0].style.display = 'none';
        focus.children[1].style.display = 'none';
        timer = setInterval(function () {
            rightArrow.click();
        }, 2000);
    });





    //    点击小圆圈
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('ol')

    var focuswidth = focus.offsetWidth;
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li'); //创建一个li元素 var li=document.createlement('li);
        li.setAttribute('index', i) //给li元素设置属性和属性名 li.setattribute('index',i)
        ol.appendChild(li); //在ol后面添加小li
        li.addEventListener('click', function () { //当点击小圆圈的时候，讲小li与click事件绑定
            for (var i = 0; i < ol.children.length; i++) {  //遍历li，先去重，再对当前的对象设置样式
                ol.children[i].className = '';
            }
            this.className = 'current';
            var index = this.getAttribute('index')  //将当前对象的属性值给一个新的变量index，记录被点击后的索引号var index=this.getattribute('index');
            num = index;
            circle = index;
            animate(ul, -index * focuswidth);
        })
    }

    // 把ol里的第一个li设置类名
    ol.children[0].className = 'current';
    var first = ul.children[0].cloneNode(true); //把ul里的第一个li克隆出来给新变量first，var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);                      //在ul后面添加刚才克隆的对象，即ul.appendchild(first);


    // 点击左右箭头
    var leftArrow = this.document.querySelector('.leftarrow');
    var rightArrow = this.document.querySelector('.rightarrow');
    var num = 0;
    var circle = 0;
    if (flag) {
        flag = false;
        leftArrow.addEventListener('click', function () {
            // 无缝滚动原理
            // 如果走到了最后一张复制的图片,让left变为0
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * focuswidth + 'px';
            }
            num--;
            animate(ul, -num * focuswidth, function () {
                flag = true;
            });
            circle--;
            if (circle < 0) {
                circle = ol.children.length - 1;
            }
            circlechange();
        })

    }


    var flag = true;
    rightArrow.addEventListener('click', function () {
        if (flag) {
            flag = false; //关闭节流阀
            // 无缝滚动原理
            // 如果走到了最后一张复制的图片,让left变为0
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -focuswidth * num, function () {
                flag = true //打开节流阀
            });
            circle++;

            if (circle == ol.children.length) {
                circle = 0;
            }
            circlechange();
        }




    })

    function circlechange() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    }

    var timer = setInterval(function () {
        rightArrow.click();
    }, 2000);


})
